<template>
	<!--  投料-->
	<div class="content">
		<div class="pageTableView" style="margin-top: 0">
			<div class="pageTableMenuView">
				<div class="pageTableTitle">
					<div>投料信息区</div>
				</div>
				<div class="pageTableButView">
					<el-button @click="goBack" :icon="ArrowLeft">返回</el-button>
					<el-button @click="handleAdd" type="primary" :icon="OfficeBuilding">投料</el-button>
				</div>
			</div>
			<!-- 表格 -->
			<el-table :data="paginatedData" height="calc(100vh - 185px)" row-key="id" :stripe="false" class="sort-el-table"
								header-cell-class-name="witheTableHeader">
				<el-table-column type="index" label="序号" width="80" align="center" />
				<el-table-column prop="batchNo" label="批次号" align="center" min-width="150" />
				<el-table-column prop="materialName" label="物料名称" align="center" min-width="200" show-overflow-tooltip />
				<el-table-column prop="materialCount" label="投料数量" align="center" />
				<el-table-column prop="createTime" label="投料时间" align="center" />
				<!--				<el-table-column-->
				<!--					prop="createUser"-->
				<!--					label="创建人"-->
				<!--					width="150"-->
				<!--					align="center"-->
				<!--				/>-->
			</el-table>
		</div>
		<!-- 编辑/新建弹框 -->
		<el-dialog v-model="showCrud" title="投料" width="1400px">
			<el-form :model="formData" label-width="100px">
				<el-row :gutter="10">
					<!--          workInfo-->
					<el-col :span="6">
						<el-form-item label="工单号">{{ workInfo.workNo }}</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="产品名称">{{ workInfo.productName || '--' }}</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="总数">{{ workInfo.orderCount || '--' }}</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="已完成数量">{{ workInfo.finishCount || '--' }}</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="物料" prop="materialId">
							<el-select v-model="formData.materialId" placeholder="请选择物料" clearable filterable style="width: 250px"
												 @change="materialIdChange">
								<el-option v-for="item in productBom" :key="item.id" :label="item.materialName" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="批次" prop="materialId">
							<el-select v-model="formData.batchNo" placeholder="请选择批次" clearable filterable style="width: 250px"
												 @change="batchNoChange">
								<el-option v-for="item in batchNoList" :key="item.id" :label="item.batchNo" :value="item.batchNo" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="可用数量"> {{ formData.canCount || '--' }}</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="库位名称"> {{ formData.storageName || '--' }}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="数量" prop="count">
							<el-input-number v-model="formData.materialCount" :min="0" />
							<el-select v-model="formData.weightBoolean" placeholder="" filterable
												 style="width: 90px;margin-left: 5px">
								<el-option v-for="item in weightBooleanList" :key="item.value" :label="item.text" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="workInfo.isThrowOrWP">
						<el-form-item label="投料消耗">
							<el-switch v-model="formData.isWorkorderOrProcedure"
												 style="--el-switch-on-color: #409EFF; --el-switch-off-color: #409EFF" active-text="工序"
												 inactive-text="工单" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="6" v-for="(item, index) of workInfo.materCountVOS" :key="index">
						<el-form-item label="物料" style="margin-bottom: -5px"> {{ item.materialName }}</el-form-item>
						<el-form-item label="数量"> {{ item.count }}</el-form-item>
					</el-col>
				</el-row>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showCrud = false">取消</el-button>
					<el-button type="primary" @click="handleSave">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axiosInstance from '@/utils/http/api';
import {
	Delete, Edit, Tickets, DocumentChecked
	, Search, Share, Upload, Refresh, Plus, DocumentCopy, Files, Rank, OfficeBuilding, ArrowLeft
} from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';
import { equipmentAll } from '@/api/scheduling/dispatchManagement';

const paginatedData = ref([]);//列表数据
const searchParam = ref({});
const formData = ref({});
const productBom = ref({});

import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const workInfo = ref({});
const weightBooleanList = ref([{
	value: 'KG',
	text: 'KG'
}, {
	value: 'Ea',
	text: 'Ea'
}]);
const getOption = () => {
	axiosInstance.get('/api/throwMaterialRecord/queryMaterialList', { params: { workId: route.query.id } }).then(res => {
		if (res.code !== 200) {
			ElMessage.error(res.message);
			return false;
		}
		productBom.value = res.data;
	});

	axiosInstance.post('/api/workOrder/queryByWorkId', {
		id: route.query.id
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			workInfo.value = res.data;
			paginatedData.value = res.data.throwMaterialRecordVOS;
		});
};

const showCrud = ref(false); // 编辑/新建弹框

const transferType = ref({ transferType: 'pick' });

// 新建记录
const handleAdd = () => {
	// formData.value = {}
	axiosInstance.post('/api/workOrder/queryIsWorkorderOrProcedure', { id: route.query.id }).then(res => {
		if (res.code != 200) {
			ElMessage.error(res.message);
			return false;
		}
		workInfo.value.isThrowOrWP = res.data.isThrowOrWP;
		workInfo.value.isWorkorderOrProcedure = res.data.isWorkorderOrProcedure;
		console.log(workInfo.value.isThrowOrWP, 'isThrowOrWP');
	});
	showCrud.value = true;
};

const batchNoList = ref([]);

const materialIdChange = (e) => {
	if (!e) {
		formData.value.batchNo = null;
		batchNoList.value = [];
		formData.value.canCount = null;
		formData.value.storageName = null;
		return false;
	}
	formData.value.weightStr = productBom.value.find(item => item.id == e)?.basicUnit || 'Ea';

	const param = {
		materialId: e,
		storageId: workInfo.value.storageId,
		current: 1,
		pageSize: 999999
	};

	axiosInstance.post('/api/warehouseStorageMaterial/pageByPojo', param).then(res => {
		if (res.code != 200) {
			ElMessage.error(res.message);
			return false;
		}

		const loop = [];
		for (const item of res.data.records) {
			if (item.materialStatus == 1) {
				loop.push(item);
			}
		}
		batchNoList.value = loop;
	});

};

const batchNoChange = (e) => {
	if (!e) {
		formData.value.canCount = null;
		formData.value.storageName = null;
		return false;
	}
	for (const item of batchNoList.value) {
		if (e == item.batchNo) {
			formData.value.canCount = item.count;
			formData.value.storageName = item.storageName;
		}
	}
};

const goBack = () => {
	router.go(-1);
};


// 保存记录
const handleSave = async () => {
	const param = JSON.parse(JSON.stringify(formData.value));
	param.workOrderId = route.query.id;

	if (!param.materialId) {
		ElMessage.warning('请选择物料');
		return false;
	}
	if (!param.materialCount || param.materialCount === 0) {
		ElMessage.warning('请输入数量');
		return false;
	}

	if (!workInfo.value.isThrowOrWP) {
		param.isWorkorderOrProcedure = workInfo.value.isWorkorderOrProcedure;
	}

	axiosInstance.post('/api/workOrderStartRecord/putMaterialRedord', param)
		.then((res) => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			showCrud.value = false;
			getList();
		});
};

// 获取列表
const getList = async () => {
	axiosInstance.post('/api/workOrder/queryByWorkId', {
		id: route.query.id
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			paginatedData.value = res.data.throwMaterialRecordVOS;
			// pageTotal.value = res.data.total;
		});
};

onMounted(() => {
	// getList();
	getOption();
});
</script>
<style scoped lang="scss"></style>
